<template>
  <div class="view-topo">
    <el-dialog
      v-model="topoVisible"
      class="view-topo-dialog"
      top="0"
      :title="'查看拓扑 - ' + title"
      :key="title"
    >
      <div class="mainVersion">
        <div
          ref="graphMainVersion"
          class="graphMainVersion"
          id="graphMainVersion"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { onUnmounted, reactive, ref } from 'vue';
import type { Graph } from '@antv/x6';
import { initGraph } from '../service/initScene';
import {
  topoDataHandle,
  showContext,
} from '../service/vueService';
import { emitter } from '@/utils/bus';

const topoVisible = ref(false);
let clusterID = ref(0);
// 主画布实例
const graphMainVersion = ref(null);
// 保存拓扑实例
let graphVersion: Graph = null;

const nodeArr = ref({});
const title = ref('');

/**
 * 查看topo
 * @param node
 */
const viewTopoFunc = async node => {
  topoVisible.value = true;
  nodeArr.value = node.data;
  title.value = node.name;

  setTimeout(async () => {
    await initContainer();
  }, 100);
};

emitter.on('viewTopo', viewTopoFunc);

onUnmounted(() => {
  emitter.off('viewTopo', viewTopoFunc);
});

/**
 * @description 初始化画布
 */
const initContainer = async () => {
  if (!graphMainVersion.value) return;

  graphVersion = initGraph(graphMainVersion.value);

  // 禁用
  graphVersion.options.interacting = false;

  const topoData = {
    nodes: [],
    edges: [],
  };

  let topoRes = await topoDataHandle(nodeArr.value);
  topoData.edges = topoRes.edges;
  topoData.nodes = topoRes.nodes;

  graphVersion.fromJSON(topoData);
  graphVersion.centerContent();

  graphVersion.on('cell:contextmenu', ({ e, x, y, cell, view }) => {
    showContext(false);
  });
};
</script>
<style lang="scss">
.view-topo {
  .el-overlay-dialog {
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
:deep(.view-topo-dialog) {
  width: calc(100vw - 40px);
  height: calc(100vh - 80px);
  position: relative;
  top: 20px;

  .mainVersion {
    flex: 1;
    width: calc(100vw - 70px);
    height: calc(100vh - 160px);
    transition: margin 0.2s ease;

    .graphMainVersion {
      width: 100%;
      height: 100%;
      left: 1250px !important;
      top: 631px !important;
    }

    .graphMainVersion * {
      user-select: none;
    }
  }
}
</style>
